<template>
  <span class="tabs">
    <span
      v-for="(item, index) in tabs"
      :key="index"
      :class="checketIndex == index ? 'activeItem' : 'defauItem'"
      class="tab"
      @click="checked(index, item)"
    >
      {{ item.name }}
    </span>
  </span>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// props参数
const props = defineProps({
  tabs: {
    type: Array,
    default: () => []
  },
  tabIndex: {
    type: Number,
    default: 0
  },
  //   默认文本颜色
  defauColor: {
    type: String,
    default: '#333'
  },
  //   激活文本颜色，文本颜色同边框颜色一致
  activeColor: {
    type: String,
    default: '#FEAF38'
  },
  //   激活背景颜色
  activeBgColor: {
    type: String,
    default: '#fafafa'
  }
})

const checketIndex = ref()
const emits = defineEmits(['checkTab'])
onMounted(() => {
  checketIndex.value = props.tabIndex
})

const checked = (index, item) => {
  checketIndex.value = index
  emits('checkTab', { item, index })
}
const init = () => {
  checketIndex.value = props.tabIndex
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.tabs {
  display: inline-block;
  height: 32px;

  /* border: 1px solid rgb(199, 198, 198); */
  border-radius: 5px;

  .tab {
    display: inline-block;
    height: 32px;
    padding: 0 14px;
    line-height: 32px;
    color: v-bind('defauColor');
    background-color: #fafafa;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
  }

  .defauItem {
    /* color: #333; */
  }

  .activeItem {
    color: v-bind('activeColor');
    background-color: v-bind('activeBgColor');
    border: 1px solid v-bind('activeColor') !important;
  }
}

.tab:first-child {
  border-radius: 2px 0 0 2px;
}

.tab:last-child {
  border-right: 1px solid rgb(199, 198, 198);
  border-radius: 0 2px 2px 0;
}
</style>
